<template>
  <div class="strut-div">
    <div class="item-top-opinion">
      <span class="time">时间：{{ nowDate }}</span>
      <span style="float: right;">
        <el-radio-group v-model="opinionType" size="mini" @change="getPublicOpinion">
          <el-radio-button label="gov_warn|gov_other">预警/其他</el-radio-button>
          <el-radio-button label="gov_negative">负面信息</el-radio-button>
        </el-radio-group>
      </span>
    </div>
    <div style="height: 336px; overflow-y: scroll;" id="earlyWarning">
      <div class="scroll-container">
        <div v-for="doc in docList" :key="doc.sid">
          <p class="opinion-early-warning-ltitle"> <span> [{{doc.media}}] </span> <a :href="doc.url" target="_blank"> <span v-html="doc.title"></span></a></p>
          <p class="opinion-early-warning-ldate"> {{doc.author}} {{doc.incdate}} </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import autoScroll from '@/util/autoScroll.js';
  export default {
    components: {

    },
    data() {
      return {
        opinionType: 'gov_warn|gov_other',
        nowDate: '',
        docList: [],
        interval:null,
      };
    },
    mounted() {
      this.nowDate = new Date().format('yyyy年mm月dd日');
      this.getPublicOpinion();

      setInterval(()=> {
        this.getPublicOpinion();
        this.nowDate = new Date().format('yyyy年mm月dd日');
      },5*60*1000);
    },
    methods: {
      getPublicOpinion() {
        autoScroll.cancelScroll(this.interval);
        this.$jqPost(this.$api.getPublicOpinion, {
          action: 'query',
          qcAction: 'getDocList',
          account: 'admin@htlywhj',
          password: 'admin',
          apiReq: 1,
          start: 0,
          rows: 100,
          attribute: this.opinionType,
          sort: 1
        }).then(res => {
          this.docList = res.docList;
          this.$nextTick(function(){
           this.interval = autoScroll.autoScrollList('earlyWarning');
          })
        })
      }
    },
    beforeDestroy() {
      autoScroll.cancelScroll(this.interval);
    }
  };
</script>

<style>
  .item-top-opinion {
    padding: 10px 20px;
  }

  .item-top-opinion .time {
    font-size: 22px;
    color: #c1d0ff;
  }

  .item-top-opinion .el-radio-button--mini .el-radio-button__inner {
    font-size: 18px;
  }

  .item-top-opinion .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    /* border-image: linear-gradient(0deg, rgba(2, 159, 216, 1), rgba(31, 213, 189, 1)) 10 10; */
    border-color: rgba(144, 110, 252, 1);
    background: linear-gradient(90deg, rgba(108, 67, 247, 1), rgba(180, 158, 255, 1));
  }

  .item-top-opinion .el-radio-button__inner:hover {
    color: rgba(144, 110, 252, 1);
  }

  .item-top-opinion .el-radio-button__inner {
    background: rgba(0, 0, 0, 0.01);
    border-color: rgba(144, 110, 252, 1);
    padding: 5px 12px;
    color: #fff;
  }

  .item-top-opinion .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 8px 0 0 8px;
  }

  .item-top-opinion .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0 8px 8px 0;
  }

  .opinion-early-warning-ltitle {
    font-size: 18px;
    padding: 5px 20px;
    line-height: 25px !important;
     width: 550px;
    max-height: 70px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .opinion-early-warning-ltitle>a {
    line-height: 25px !important;
  }
  .opinion-early-warning-ltitle>a:link {
    color: #FFF;
    text-decoration:none;
  }
  .opinion-early-warning-ltitle>a:visited {
    color: #FFF;
    text-decoration:none;
  }

  .opinion-early-warning-ltitle>span {
    color: #6340E2;

  }
  .opinion-early-warning-ldate {
    padding: 5px 0px 10px;
    margin: 0 20px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(62, 162, 254, 0.2);
  }
</style>
